<template>
  <div class="digital-rain-bg">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  const fontSize = 16
  const columns = Math.floor(canvas.width / fontSize)
  const drops = Array(columns).fill(0)
  const colors = ['#0F0', '#0FF', '#F0F', '#FF0', '#00F']

  // 使用更多样的字符
  const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'.split('')

  const draw = () => {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    ctx.font = `${fontSize}px monospace`

    for (let i = 0; i < drops.length; i++) {
      const char = chars[Math.floor(Math.random() * chars.length)]
      const color = colors[Math.floor(Math.random() * colors.length)]
      
      ctx.fillStyle = color
      ctx.fillText(char, i * fontSize, drops[i] * fontSize)

      // 添加发光效果
      ctx.shadowBlur = 10
      ctx.shadowColor = color

      if (drops[i] * fontSize > canvas.height && Math.random() > 0.95) {
        drops[i] = 0
      }

      drops[i]++
    }

    ctx.shadowBlur = 0

    animationId = requestAnimationFrame(draw)
  }

  draw()

  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.digital-rain-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

canvas {
  display: block;
}
</style>

